
<template>
  <div class="department-container">
    <apptancuang :id="id" :show="show" :statuscode="Statuscode" :data="data" @guanbi="guanbiFn" />
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- card title -->
        <div slot="header">
          <!-- 用一个行列布局 -->
          <el-row>
            <el-col :span="20">
              <span>{{ gousiming }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>负责人</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="opentancen(null)">添加子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- card body -->
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
          <template #default="{ data }">
            <el-row
              style="width: 100%;"
            >
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="opentancen(data.id,'add')">添加子部门</el-dropdown-item>
                        <el-dropdown-item @click.native="opentancen(data.id,'edit')">编辑部门</el-dropdown-item>
                        <el-dropdown-item @click.native="delclick(data)">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>

  </div>
</template>

<script>
import { listToTreeData } from '@/utils'
import { organizational, delorganizational } from '@/api/deeptress'
import apptancuang from '@/views/departments/add-tancen.vue'
export default {
  components: {
    apptancuang
  },
  data() {
    return {
      // 状态码
      Statuscode: '',
      // 获取点击事件的id
      id: '',
      // 弹层显示状态
      show: false,
      // 公司名字
      gousiming: '',
      // 架构数据
      data: [

      ],
      // 设置字段名的配置
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.huoqu()
  },
  methods: {
    // 点击输出对应数据
    handleNodeClick(data) {
      console.log(data)
    },
    // 获取
    async huoqu() {
      const { companyName, depts, id } = await organizational()
      console.log(id)
      this.data = listToTreeData(depts)
      this.gousiming = companyName
    },
    // 删除
    delclick(data) {
      console.log('删除的数据', data)
      this.$confirm(`确定删除${data.name}吗？`).then(async() => {
        if (data.children && data.children.length > 0) {
          return this.$message.error('当前有子集不能删除')
        }
        const res = await delorganizational(data.id)
        console.log(res)
        this.$message.success('删除成功')
        // 刷新页面
        this.huoqu()
      }).catch(() => {
        // 取消
      })
    },
    // 点击添加子部门
    opentancen(id, Statuscode = '') {
      this.show = true
      this.id = id
      // 状态码
      this.Statuscode = Statuscode
    },
    // 关闭
    guanbiFn(a) {
      this.show = false
      // 关闭后刷新
      if (a !== 0) this.huoqu()
    }
  }
}

</script>

<style lang='scss' scoped>
::v-deep .el-tree-node__content {
  margin: 3px 0;
}
</style>
